<template>
	<div>
		<SearchHeader :search="search" @handlerSearch="handlerSearch">
		</SearchHeader>
		<TableCom
			ref="tableCom"
			url="/user"
			@handlerOperate="handlerOperate"
			:tableColumns="tableColumns"
			:tableOperate="tableOperate"
			:isTableIndex="true"
			:operateWidth="400"
		>
			<div slot="state" slot-scope="scope">
				<el-switch
				  @click.native="activeHandler(scope.row)"
					v-if="scope.row.state == 0"
					:value="scope.row.state"
					active-color="#13ce66"
					inactive-color="#ddd"
					:active-value=1
					:inactive-value=0
				>
				</el-switch>
				<el-switch
					@click.native="activeHandler(scope.row)"
					v-else
					:value="scope.row.state"
					active-color="#13ce66"
					inactive-color="#ddd"
					:active-value=1
					:inactive-value=0
				>
				</el-switch>
			</div>
		</TableCom>
	</div>
</template>
<script>
export default {
	data () {
		return {
			search : {	// 搜索配置
				loading : false,
				form : [
					{
						type : 'text',
						label : '用户名:',
						placeholder : '请输入用户名',
						key : 'username'
					},
					{
						type : 'text',
						label : '手机号:',
						placeholder : '请输入手机号',
						maxlength : 11,
						key : 'mobile'
					}
				],
				operates : [
					{
						type : 'search',
						color : 'primary',
						icon : 'el-icon-search',
						name : '查询'
					},
					{
						type : 'add',
						color : 'success',
						icon : 'el-icon-circle-plus-outline',
						role : ['B_USER_SAVE'],
						name : '新增'
					}
				]
			},
			tableColumns : [	// 表头配置
				{ name : '用户名', key : 'username' },
				{ name : '手机号', key : 'mobile' },
				{ name : '状态', key : 'state' },
				{ name : '创建人', key : 'createName' },
				{ name : '创建时间', key : 'createTime',width : 170},
				{ name : '最后更新时间', key : 'updateTime',width : 170 }
			],
			tableOperate : [// 操作
				{
					name : '分配角色',
					type : 2,
					color : 'success',
					role : ['B_PERMISSION_ASSIGN'],
					icon : 'el-icon-user'
				},
				{
					name : '查看',
					type : 0,
					color : 'warning',
					role : [],
					icon : 'el-icon-view'
				},
				{
					name : '修改',
					type : 1,
					color : 'primary',
					role : ['B_USER_UPDATE'],
					icon : 'el-icon-edit'
				},
				{
					name : '删除',
					type : 3,
					color : 'danger',
					role : ['B_USER_DEL'],
					icon : 'el-icon-delete'
				}
			],
			userDialogForm : [ // 用户弹窗配置
				{
					type : 'text',
					label : '用户名',
					placeholder : '请输入用户名',
					key : 'username',
					maxlength : 10,
					rules : [
						{ required : true, message : '请输入用户名', trigger : 'blur' }
					]
				},
				{
					type : 'text',
					label : '手机号',
					placeholder : '请输入手机号',
					key : 'mobile',
					maxlength : 11,
					rules : [
						{ required : true, message : '请输入手机号', trigger : 'blur' }
					]
				},
				{
					type : 'password',
					label : '密码',
					placeholder : '请输入密码',
					key : 'password',
					maxlength : 16,
					rules : [
						{ required : true, message : '请输入密码', trigger : 'blur' }
					]
				},
				{
					type : 'radio',
					label : '状态',
					placeholder : '请选择状态',
					key : 'state',
					options : [
						{
							value : 0,
							label : '禁用'
						},
						{
							value : 1,
							label : '启动'
						}
					],
					rules : [
						{ required : true, message : '请选择状态', trigger : 'blur' }
					]
				}
			],
			rolesDialogForm : [ // 分配角色弹窗配置
				{
					type : 'checkbox',
					label : '角色',
					placeholder : '请选择角色',
					key : 'role',
					options : [],
					rules : [
						{
							type : 'array',
							required : true,
							message : '请选择角色',
							trigger : 'blur'
						}
					]
				}

			]
		};

	},
	created (){
		this.userId  = '';
	},
	methods : {
		// 用户状态
		activeHandler (row){
			let tip = '';
			let state = row.state;
			if (row.state===0){
				tip = `是否启用【${row.username}】用户?`;
				state = 1;
			} else {
				tip = `是否禁用【${row.username}】用户?`;
				state = 0;
			}
			this.$confirm(tip,'提示',{
				confirmButtonText : '确定',
				cancelButtonText : '取消',
				beforeClose : async (action, instance, done) => {
					if (action === 'confirm') {
						instance.confirmButtonLoading = true;
						instance.confirmButtonText = '执行中...';
						delete row.password;
						try {
							await this.$api.userUpdate({...row,state});
							this.$refs.tableCom.fetchData({
								pageNum : 1,
								pageSize : 100
							});
						} finally  {
							instance.confirmButtonLoading = false;
							done();
						}

					} else {
						done();
						this.$notify({
							title : '警告',
							message : '取消操作',
							type : 'warning'
						});
					}
				}
			});
		},
		// 搜索
		handlerSearch (types, data) {
			if (types.type === 'add'){
				this.userDialogForm[2].rules[0].required =true;
				this.$dialogForm.open({
					config : {
						title : '新增',
						leftButText : '取消',
						isRightBut : true
					},
					disabledAll : false,
					dialogForm : this.userDialogForm,
					handlerFn : this.handlerUserAdd
				});
			} else {
				this.search.loading = true;
				this.$refs.tableCom.fetchData({
					pageNum : 1,
					pageSize : 100
				},
				data,() => {
					this.search.loading = false;
				}
				);
			}
		},
		// 用户新增
		async handlerUserAdd (parameMap, callback) {
			try {
				await	this.$api.userAdd(parameMap);
				callback(false);
				this.$refs.tableCom.fetchData({
					pageNum : 1,
					pageSize : 100
				});
			} catch (error) {
				callback(true);
			}
		},
		// 用户修改
		async handlerUserUpdate (parameMap, callback) {
			try {
				if (parameMap.password === '' || parameMap.password === null){
					delete parameMap.password;
				}
				parameMap.id = this.userId;
				await	this.$api.userUpdate(parameMap);
				callback(false);
				this.$refs.tableCom.fetchData({
					pageNum : 1,
					pageSize : 100
				});
			} catch (error) {
				callback(true);
			}
		},
		// 分配角色
		async handlerRolesUpdate (parameMap, callback) {
			if (parameMap.role.length ===0){
				this.$notify({
					title : '警告',
					message : '请勾选对应的角色',
					type : 'warning'
				});
				callback(true);
				return;
			}
			try {
				await	this.$api.assignRoles(this.userId,parameMap.role);
				callback(false);
				this.$refs.tableCom.fetchData({
					pageNum : 1,
					pageSize : 100
				});
			} catch (error) {
				callback(true);
			}
		},
		// 操作项
		async	handlerOperate (operateItem, data) {
			this.userId = data.id;
			switch (Number(operateItem.type)) {
			case 0:
				this.$dialogForm.open({
					config : {
						title : '查看',
						leftButText : '关闭',
						isRightBut : false
					},
					disabledAll : true,
					dialogForm : this.userDialogForm,
					handlerFn : null,
					result : data
				});
				break;
			case 1:
				this.userDialogForm[2].rules[0].required =false;
				data.password = '';
				this.$dialogForm.open({
					config : {
						title : '修改',
						leftButText : '取消',
						isRightBut : true
					},
					disabledAll : false,
					dialogForm : this.userDialogForm,
					handlerFn : this.handlerUserUpdate,
					result : data
				});
				break;
			case 2:
				let roles = await	this.$api.findByIdAndRole(data.id);
				let result = await this.$api.getRoles();
				this.rolesDialogForm[0].options = result.data.map(item=>{
					return {
						value : item.id,
						label : item.roleName
					};
				});
				this.$dialogForm.open({
					config : {
						title : `【${data.username}】用户-分配角色`,
						leftButText : '取消',
						isRightBut : true
					},
					disabledAll : false,
					dialogForm : this.rolesDialogForm,
					handlerFn : this.handlerRolesUpdate,
					result : {role : roles.data.map(item=>item.roleId)}
				});
				break;
			case 3:
				this.$confirm(`是否删除【${data.username}】用户?`,'提示',{
					confirmButtonText : '确定',
					cancelButtonText : '取消',
					beforeClose : async (action, instance, done) => {
						if (action === 'confirm') {
							instance.confirmButtonLoading = true;
							instance.confirmButtonText = '执行中...';
							try {
								await this.$api.userDelete(data.id);
								this.$refs.tableCom.fetchData({
									pageNum : 1,
									pageSize : 100
								});
							} finally  {
								instance.confirmButtonLoading = false;
								done();
							}

						} else {
							done();
							this.$notify({
								title : '警告',
								message : '取消操作',
								type : 'warning'
							});
						}
					}
				});
				break;
			}
		}
	}
};
</script>
<style lang="scss" scoped></style>
